import React, { useState } from "react";
import login1 from "../../../public/login1.jpg";
import { Button, Form, Input, Toast } from "antd-mobile";
import { UserOutline, MailOutline } from "antd-mobile-icons";
import request from "../../utils/request";
import { useNavigate } from "react-router-dom";
import Header from "../../components/Header";
import { LeftOutline } from "antd-mobile-icons";
function Login() {
  //存储手机号
  const [tel,setTel] = useState("")
 const navigate=useNavigate()
  const [form]=Form.useForm()
  const time =5 
  const [count,setCount]=useState(time)
  //获取验证码
  const getCode=async()=>{
    //手机号正则 
    const telReg = /^1[3-9]\d{9}$/
    //校验手机号必填且必须是11位数字
    if(telReg.test(tel)){
         let timer =setInterval(()=>{
             setCount(prev=>{
                if(prev<=1){
                   clearInterval(timer)
                    return time
                }
             return prev-1
             })
            
         },1000)
    }else if(tel===""){
      Toast.show('请填写手机号')
    }else{
      Toast.show('手机号必须11位')
    }

    //验证码请求
    const res = await request.post('/user/captcha',{tel})
    console.log(res)
    //验证码自动填充到验证码输入框中
     form.setFieldValue('telCode',res.data.data)
  }

  const onFinish=async(value)=>{
      //登录请求
    const res = await request.post('/user/login',value)
    console.log(res.data)
    const {data,code,message}=res.data 

    if(code===200){
       Toast.show(message)
       //存储本地token
       localStorage.setItem('token',data.token)
       //存储用户信息
       localStorage.setItem('userInfo',JSON.stringify(data.userInfo))
       //跳转到我的页面
       navigate('/my')
    }else{
       Toast.show(message)
    }
  }
  return (
    <div>
       {/* 头部组件 */}
      <Header left={<LeftOutline />} title=""></Header>
      <div className="header">
        <img src={login1} alt="" />
        <h1>手机号登录</h1>
      </div>

      <div style={{ marginTop: "20px" }}>
        <Form
        form={form}
         onFinish={onFinish}
          layout="horizontal"
          footer={
            <Button block color="danger" type="submit">
              登录
            </Button>
          }
        >
          <Form.Item
            label={
              <span>
                <UserOutline />
                +86
              </span>
            }

            name='tel'
            rules={[
              {required:true,message:'手机号不能为空'}
            ]}
          >
            <Input placeholder="请输入手机号码"  value={tel} onChange={(value)=>setTel(value)}/>
          </Form.Item>

          <Form.Item
            label={
              <span>
                <MailOutline />
              </span>
            }
            name='captcha'
             rules={[
              {required:true,message:'验证码不能为空'}
            ]}
            extra={<Button disabled={time!==count}  onClick={()=>getCode()}>{count===time ? '获取验证码':`${count}秒后重新获取`}</Button>}
          >
            <Input placeholder="请输入验证码" />
          </Form.Item>
        </Form>
      </div>

      <div className="icon">
        <div>
          <span style={{ color: "#999999",marginLeft:'30px' }}>——或通过以下方式登录——</span>
          <div style={{marginTop:'20px' }}>
            <img src="../../../public/icon1.jpg" alt="" />
            <img src="../../../public/icon1-02.jpg" alt="" style={{marginLeft:'10px' }} />
            <img src="../../../public/icon1-03.jpg" alt="" style={{marginLeft:'10px' }} />
            <img src="../../../public/icon1-04.jpg" alt=""  style={{marginLeft:'10px' }}/>
            <img src="../../../public/icon1-05.jpg" alt=""  style={{marginLeft:'10px' }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
